<% layout('/layouts/default.html', {title: '', bodyClass: ''}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script src="${ctxStatic}/echarts/infographic.js"></script>
<script src="${ctxStatic}/echarts/macarons.js"></script>
<script src="${ctxStatic}/echarts/shine.js"></script>
<script src="${ctxStatic}/echarts/vintage.js"></script>
<script src="${ctxStatic}/echarts/roma.js"></script>
<div class="content pb0">
	<!-- Info boxes -->

	<!-- Chart boxes -->
	<div class="row">
		<div class="col-md-12">
			<div class="box box-widget">
				<div class="box-header with-border">
					<h3 class="box-title">各院校数据上报情况</h3>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool"
							data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
						<div class="btn-group">
							<button type="button" class="btn btn-box-tool dropdown-toggle"
								data-toggle="dropdown">
								<i class="fa fa-wrench"></i>
							</button>
							<ul class="dropdown-menu" role="menu">
								<li><a href="#">导出Excel</a></li>
								<li><a href="#">导出Word</a></li>
								<li class="divider"></li>
								<li><a href="#">基本设置</a></li>
							</ul>
						</div>
						<button type="button" class="btn btn-box-tool"
							data-widget="remove">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
					<div class="row">
						<div class="col-md-6">
							<div class="chart">
								<div id="s3Chart" style="height: 480px; width: 100%"></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="chart">
								<div id="s4Chart" style="height: 480px; width: 100%"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="chart">
								<div id="totalHighestChart" style="height: 480px; width: 100%"></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="chart">
								<div id="totalMentorChart" style="height: 480px; width: 100%"></div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-6">
							<div class="chart">
								<div id="totalProfessionalChart"
									style="height: 680px; width: 100%"></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="chart">
								<div id="totalChart" style="height: 680px; width: 100%"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="chart">
								<div id="totalPoliticalChart" style="height: 680px; width: 100%"></div>
							</div>
						</div>

						<div class="col-md-6">
							<div class="chart">
								<div id="totalAgeGroupChart" style="height: 680px; width: 100%"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="chart">
								<div id="totalTalentChart" style="height: 680px; width: 100%"></div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12">
							<div class="chart">
								<div id="myChart" style="height: 800px; width: 100%"></div>


							</div>
						</div>

					</div>
				</div>

			</div>
		</div>
	</div>
</div>
<footer class="main-footer m0">
	<div class="pull-right hidden-xs">当前版本：
		${@Global.getConfig('productVersion')}</div>
	&copy; ${@DateUtils.getYear()} ${@Global.getConfig('productName')}
</footer>
<% } %>

<script type="text/javascript">
	var s3Chart = echarts.init(document.getElementById('s3Chart'),
			'infographic');

	var s3_names = [];
	var s3_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/level",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					s3_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					s3_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				s3Chart.setOption({
					title : {
						text : '办学层次',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : s3_names,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					},
					series : [ {
						name : '办学层次',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : s3_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			s3Chart.hideLoading();
		}
	})

	var s4Chart = echarts.init(document.getElementById('s4Chart'), 'roma');

	var s4_names = [];
	var s4_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/nature",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					s4_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					s4_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				s4Chart.setOption({
					title : {
						text : '办学性质',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : s4_names
					},
					series : [ {
						name : '办学性质',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : s4_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			s4Chart.hideLoading();
		}
	})

	var totalTalentChart = echarts.init(document
			.getElementById('totalTalentChart'), 'macarons');

	var totalTalent_names = [];
	var totalTalent_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/totalTalent",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					totalTalent_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					totalTalent_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				totalTalentChart.setOption({
					title : {
						text : '人才称号统计',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : totalTalent_names
					},
					series : [ {
						name : '人才称号统计',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : totalTalent_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			totalTalentChart.hideLoading();
		}
	})

	var totalAgeGroupChart = echarts.init(document
			.getElementById('totalAgeGroupChart'), 'infographic');

	var totalAgeGroup_names = [];
	var totalAgeGroup_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/totalAgeGroup",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					totalAgeGroup_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					totalAgeGroup_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				totalAgeGroupChart.setOption({
					title : {
						text : '年龄段统计',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : totalAgeGroup_names
					},

					series : [ {
						name : '年龄段统计',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : totalAgeGroup_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			totalAgeGroupChart.hideLoading();
		}
	})

	var totalPoliticalChart = echarts.init(document
			.getElementById('totalPoliticalChart'), 'shine');

	var totalPolitical_names = [];
	var totalPolitical_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/totalPolitical",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					totalPolitical_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					totalPolitical_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				totalPoliticalChart.setOption({
					title : {
						text : '政治面貌',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : totalPolitical_names,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					},
					series : [ {
						name : '政治面貌',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : totalPolitical_nums
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			totalPoliticalChart.hideLoading();
		}
	})

	var totalProfessionalChart = echarts.init(document
			.getElementById('totalProfessionalChart'));

	var totalProfessional_names = [];
	var totalProfessional_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/totalProfessional",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					totalProfessional_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					totalProfessional_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				totalProfessionalChart.setOption({
					title : {
						text : '职称统计',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : totalProfessional_names
					},
					series : [ {
						name : '职称统计',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : totalProfessional_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			totalProfessionalChart.hideLoading();
		}
	})

	var totalChart = echarts.init(document.getElementById('totalChart'));

	var totalChart_names = [];
	var totalChart_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/total",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					totalChart_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					totalChart_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				totalChart.setOption({
					title : {
						text : '高端人才统计',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : totalChart_names
					},
					series : [ {
						name : '高端人才统计',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : totalChart_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			totalChart.hideLoading();
		}
	})

	var totalHighestChart = echarts.init(document
			.getElementById('totalHighestChart'));

	var totalHighest_names = [];
	var totalHighest_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/totalHighest",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					totalHighest_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					totalHighest_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				totalHighestChart.setOption({
					title : {
						text : '学历统计',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : totalHighest_names
					},
					series : [ {
						name : '学历统计',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : totalHighest_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			totalHighestChart.hideLoading();
		}
	})

	var totalMentorChart = echarts.init(document
			.getElementById('totalMentorChart'));

	var totalMentor_names = [];
	var totalMentor_nums = [];
	$.ajax({
		type : "post",
		async : true,
		url : "${ctx}/sys/count/totalMentor",
		data : {},
		dataType : "json",
		success : function(result) {
			if (result) {
				for (var i = 0; i < result.length; i++) {
					totalMentor_names.push(result[i].NAME);
				}
				for (var i = 0; i < result.length; i++) {
					totalMentor_nums.push({
						name : result[i].NAME,
						value : result[i].TOTAL
					});
				}
				totalMentorChart.setOption({
					title : {
						text : '导师类型',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : totalMentor_names
					},
					series : [ {
						name : '导师类型',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : totalMentor_nums,
						itemStyle : {
							normal : {
								label : {
									show : true,
									formatter : '{b} : {c} ({d}%)'
								},
								labelLine : {
									show : true
								}
							}
						}
					} ]
				});

			}

		},
		error : function(errorMsg) {
			alert("图表请求数据失败!");
			totalMentorChart.hideLoading();
		}
	})

	var myChart = echarts.init(document.getElementById('myChart'));
	myChart.setOption({
		title : {
			text : '学院数据上报统计'
		},
		tooltip : {},
		grid : {
			left : '3%',
			right : '%',
			bottom : '3%',
			containLabel : true
		},
		legend : {
			data : [ '学院数据上报统计' ]
		},
		xAxis : {
			data : []
		},
		yAxis : {},
		series : [ {
			name : '教师人数',
			type : 'bar',
			data : []
		} ]
	});

	myChart.showLoading();
	var names = [];
	var nums = [];

	$
			.ajax({
				type : "post",
				async : true,
				url : "${ctx}/sys/count/totalTeacher",
				data : {},
				dataType : "json",
				success : function(result) {
					//请求成功时执行该函数内容，result即为服务器返回的json对象
					if (result) {
						for (var i = 0; i < result.length; i++) {
							names.push(result[i].NAME); //挨个取出类别并填入类别数组
						}
						for (var i = 0; i < result.length; i++) {
							nums.push(result[i].TOTAL); //挨个取出销量并填入销量数组
						}
						myChart.hideLoading(); //隐藏加载动画
						myChart
								.setOption({ //加载数据图表
									xAxis : {
										type : 'category',
										axisLabel : {
											interval : 0,//让所有坐标值全部显示
											rotate : 90,//让坐标值旋转一定的角度
										},
										data : names
									},
									series : [ {
										name : '教师人数',
										itemStyle : {
											normal : {
												color : function(d) {
													return "#"
															+ Math
																	.floor(
																			Math
																					.random()
																					* (256 * 256 * 256 - 1))
																	.toString(
																			16);
												}
											},
										},
										data : nums
									} ]
								});

					}

				},
				error : function(errorMsg) {
					//请求失败时执行该函数
					alert("图表请求数据失败!");
					myChart.hideLoading();
				}
			})
</script>
<script>
	$(window).resize(function() {
		var footerHeight = $('.main-footer').outerHeight() || 0;
		var windowHeight = $(window).height();
		$('.content').css('min-height', windowHeight - footerHeight)
	}).resize();
</script>